<template>
  <div class="home">
    <el-button @click="addMovieItem">添加数据</el-button>

    <!-- <MyDrawer>111</MyDrawer> -->
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="60%"
    >
      <el-form label-width="80px" :model="movieForm">
        <el-form-item label="电影名称">
          <el-input v-model="movieForm.nm"></el-input>
        </el-form-item>
        <el-form-item label="主演">
          <el-input v-model="movieForm.star"></el-input>
        </el-form-item>
        <el-form-item label="海报">
          <el-input v-model="movieForm.img"></el-input>
        </el-form-item>
        <el-form-item label="上映时间">
          <el-date-picker
            v-model="movieForm.date"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!-- end -->
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column label="ID" prop="id" width="80"></el-table-column>
      <el-table-column label="电影名称" prop="nm" width="100"></el-table-column>
      <el-table-column label="主演" prop="star" width="180"></el-table-column>
      <el-table-column
        label="上映日期"
        prop="date"
        width="100"
      ></el-table-column>
      <el-table-column label="电影海报" width="180">
        <template slot-scope="scope">
          <ImageView :src="scope.row.img"></ImageView>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="params.size"
      @current-change="currentChange"
    ></el-pagination>
  </div>
</template>

<script>
import axios from 'axios'
import TestCom from '../components/test-coms/index.vue'
import MyFormData from '../components/formdata/index.vue'
// import MyDrawer from '../components/my-drawer/MyDrawer.vue'
export default {
  components: { MyFormData },
  data() {
    return {
      loading: true,
      params: { page: 1, size: 5 },
      tableData: [],
      total: 0,
      drawer: false,
      direction: 'rtl',
      movieForm: {
        nm: '',
        id: '',
        img: '',
        date: '',
        star: '',
      },
      title: '',
      showDrawer: false,
    }
  },
  created() {
    this.getMovieList()
  },
  methods: {
    sleep() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(true)
        }, 3000)
      })
    },
    // async 返回promise函数 await 后面就是promise函数
    async getMovieList() {
      await this.sleep()
      const res = await axios.get('/api/list', { params: this.params })
      this.loading = false // 关闭loading
      console.log('rse:', res.data.data)
      const total = res.data.data.total,
        list = res.data.data.list
      this.tableData = list
      this.total = total
    },
    // 弹出框提交数据
    async submitForm() {
      console.log('提交数据:', this.movieForm)
      if (
        this.movieForm.nm &&
        this.movieForm.img &&
        this.movieForm.star &&
        this.movieForm.date
      ) {
        if (this.title === '添加') {
          const res = await axios.post('/api/add', this.movieForm)
          console.log('添加:', res.data)
          if (res.data.code === 0) {
            this.$message.success('添加成功')
            this.drawer = false
            this.getMovieList()
          }
        } else if (this.title === '编辑') {
          const res = await axios.post('/api/edit', this.movieForm)
          console.log('编辑:', res.data)
          if (res.data.code === 0) {
            this.$message.success('编辑成功')
            this.drawer = false
            this.getMovieList()
          }
        }
      } else {
        this.$message.warning('请输入内容再提交')
      }
    },
    // 添加数据
    addMovieItem() {
      this.title = '添加'
      // 调用弹出框
      // this.drawer = true
      // this.showDrawer = true
      // this.$myDrawer()   函数调用
      this.$notice({
        headerSlot: {
          // form组件
          component: MyFormData,
          props: {
            title: '我是自定义组件标题',
          },
          listeners: {
            success(res) {
              console.log('自定义组件触发成功', res)
            },
          },
        },
      })

      // console.log(this.$notice())
    },
    handeleMyDrawerClose() {
      this.showDrawer = false
    },
    // 关闭弹出框
    handleClose() {
      this.drawer = false
    },
    handleEdit(index, row) {
      this.title = '编辑'
      this.drawer = true
      // 为了让两个数据之间不互相影响，所以做了一个深拷贝
      this.movieForm = JSON.parse(JSON.stringify(row))
    },
    async handleDelete(index, row) {
      const deleteData = await axios.get('/api/delete', {
        params: { id: row.id },
      })
      if (deleteData.data.code === 0) {
        this.getMovieList()
        this.$message.success('删除成功')
      }
    },
    currentChange(currentPage) {
      console.log('currentPage:', currentPage)
      this.params.page = currentPage
      this.getMovieList()
    },
  },
}
</script>
<style lang="scss" scoped>
.home {
  /* height: 500px;
  background: red; */
}
</style>
